import {Component} from 'react'
// 引入css
import './assets/css/app.css'
// 通过类 创建组件
class App extends Component {
  constructor(){
    super()
    // 构造函数
    this.state={
      list:[
        {
          id:1,
          name:'大大',
          con:'明天继续提问你们啊！！！'
        },
        {
          id:2,
          name:'老六',
          con:'搞起来'
        },
        {
          id:3,
          name:'老四',
          con:'solesole'
        }
      ]
    }

  }
  render(){
    const {list} = this.state
    return (
      <div className='bigBox'>
        <h1>留言板</h1>
        <hr></hr>
        <div className='box'>
          <input className='inp1' type='text' placeholder='请输入昵称'></input>
          <br/>
          <input className='inp2' type='text' placeholder='请输入留言内容'></input>
          <br/>
          <button className='btn'>提交留言</button>
        </div>
        
        {
          list.map(item=>
          <div key={item.id} className='box1'>
            <button className='btn'>X</button>
            <p>昵称：{item.name}</p>
            <p>留言：{item.con}</p>
          </div>
          )
        }
        
      </div>
    )
  }
}

//把封装好的组件进行导出
export default App;